const appInstance =getApp();
Page({
  data: {
    baseUrl: appInstance.globalData.baseUrl,
    categories: [], // 分类数据
    currentCategoryId: null, // 当前选中的分类ID
    leftScrollTop: 0, // 左侧滚动位置
    rightScrollTop: 0, // 右侧滚动位置
    rightScrollHeights: [], // 右侧各分类区块高度
    windowHeight: 0, // 窗口高度
    isScrolling: false // 是否正在滚动
  },

  onLoad: function() {
    this.getWindowHeight();
    this.loadCategoryData();
  },

  // 获取窗口高度
  getWindowHeight: function() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight
        });
      }
    });
  },

  // 加载分类数据
  loadCategoryData: function() {
    let {baseUrl}=this.data;
    // 模拟数据，实际项目中应从接口获取
    const mockData = [
      {
        id: 1,
        name: '热门推荐',
        children: [
          { id: 101, name: '爆款热卖', image: baseUrl+'/uploads/images/hot1.jpg' },
          { id: 102, name: '新品上市', image: baseUrl+'/uploads/images/hot2.jpg' },
          { id: 103, name: '限时特惠', image: baseUrl+'/uploads/images/hot3.jpg' },
          { id: 104, name: '超值套装', image: baseUrl+'/uploads/images/hot4.jpg' }
        ]
      },
      {
        id: 2,
        name: '手机数码',
        children: [
          { id: 201, name: '智能手机', image: baseUrl+'/uploads/images/digital1.jpg' },
          { id: 202, name: '平板电脑', image: baseUrl+'/uploads/images/digital2.jpg' },
          { id: 203, name: '智能手表', image: baseUrl+'/uploads/images/digital3.jpg' },
          { id: 204, name: '耳机耳麦', image: baseUrl+'/uploads/images/digital4.jpg' },
          { id: 205, name: '摄影摄像', image: baseUrl+'/uploads/images/digital5.jpg' }
        ]
      },
      {
        id: 3,
        name: '电脑办公',
        children: [
          { id: 301, name: '笔记本', image: baseUrl+'/uploads/images/computer1.jpg' },
          { id: 302, name: '台式机', image: baseUrl+'/uploads/images/computer2.jpg' },
          { id: 303, name: '显示器', image: baseUrl+'/uploads/images/computer3.jpg' },
          { id: 304, name: '外设产品', image: baseUrl+'/uploads/images/computer4.jpg' }
        ]
      },
      {
        id: 4,
        name: '家用电器',
        children: [
          { id: 401, name: '电视', image: baseUrl+'/uploads/images/appliance1.jpg' },
          { id: 402, name: '空调', image: baseUrl+'/uploads/images/appliance2.jpg' },
          { id: 403, name: '冰箱', image: baseUrl+'/uploads/images/appliance3.jpg' },
          { id: 404, name: '洗衣机', image: baseUrl+'/uploads/images/appliance4.jpg' },
          { id: 405, name: '厨房电器', image: baseUrl+'/uploads/images/appliance5.jpg' }
        ]
      },
      {
        id: 5,
        name: '食品生鲜',
        children: [
          { id: 501, name: '新鲜水果', image: baseUrl+'/uploads/images/food1.jpg' },
          { id: 502, name: '海鲜水产', image: baseUrl+'/uploads/images/food2.jpg' },
          { id: 503, name: '肉禽蛋奶', image: baseUrl+'/uploads/images/food3.jpg' },
          { id: 504, name: '休闲零食', image: baseUrl+'/uploads/images/food4.jpg' }
        ]
      },
      {
        id: 6,
        name: '美妆个护',
        children: [
          { id: 601, name: '面部护肤', image: baseUrl+'/uploads/images/beauty1.jpg' },
          { id: 602, name: '彩妆香水', image: baseUrl+'/uploads/images/beauty2.jpg' },
          { id: 603, name: '男士护理', image: baseUrl+'/uploads/images/beauty3.jpg' },
          { id: 604, name: '洗发护发', image: baseUrl+'/uploads/images/beauty4.jpg' }
        ]
      }
    ];

    this.setData({
      categories: mockData,
      currentCategoryId: mockData[0].id
    }, () => {
      this.calculateRightHeights();
    });
  },

  // 计算右侧各分类区块高度
  calculateRightHeights: function() {
    const query = wx.createSelectorQuery().in(this);
    const heights = [];
    let totalHeight = 0;
    
    this.data.categories.forEach((item, index) => {
      query.select(`#cat-${item.id}`).boundingClientRect();
    });

    query.exec((res) => {
      res.forEach((rect) => {
        totalHeight += rect.height;
        heights.push(totalHeight);
      });
      
      this.setData({
        rightScrollHeights: heights
      });
    });
  },

  // 切换分类
  switchCategory: function(e) {
    const categoryId = e.currentTarget.dataset.id;
    if (this.data.currentCategoryId === categoryId) return;
    
    this.setData({
      currentCategoryId: categoryId,
      isScrolling: true
    });
    
    // 滚动到对应位置
    const index = this.data.categories.findIndex(item => item.id === categoryId);
    if (index > 0) {
      const scrollTop = index > 0 ? this.data.rightScrollHeights[index - 1] : 0;
      this.setData({
        rightScrollTop: scrollTop
      });
    } else {
      this.setData({
        rightScrollTop: 0
      });
    }
    
    // 左侧导航滚动
    this.scrollLeftNav(index);
  },

  // 滚动左侧导航
  scrollLeftNav: function(index) {
    const query = wx.createSelectorQuery().in(this);
    query.select(`#nav-${this.data.categories[index].id}`).boundingClientRect();
    query.select('.left-nav').boundingClientRect();
    
    query.exec((res) => {
      const itemTop = res[0].top;
      const navHeight = res[1].height;
      const itemHeight = res[0].height;
      
      this.setData({
        leftScrollTop: itemTop - navHeight / 2 + itemHeight / 2
      });
      
      // 滚动结束后重置状态
      setTimeout(() => {
        this.setData({ isScrolling: false });
      }, 300);
    });
  },

  // 右侧滚动事件
  onRightScroll: function(e) {
    if (this.data.isScrolling) return;
    
    const scrollTop = e.detail.scrollTop;
    const heights = this.data.rightScrollHeights;
    
    for (let i = 0; i < heights.length; i++) {
      if (scrollTop < heights[i]) {
        const currentId = this.data.categories[i].id;
        if (this.data.currentCategoryId !== currentId) {
          this.setData({
            currentCategoryId: currentId
          });
          this.scrollLeftNav(i);
        }
        break;
      }
    }
  },

  // 跳转到商品列表页
  navigateToGoodsList: function(e) {
    const categoryId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/goods/list?categoryId=${categoryId}`
    });
  }
});